.line{border-bottom:1px solid #ccc;margin: 5px 0}
.clear{clear:both;display: block;}
.block{display: block;}
.none{display: none;}
.bold{font-weight: bold;}
.center{text-align:center}
.center-div{margin: auto !important}
.w30{width:30% !important;}
.w40{width:40% !important;}
.w50{width:50% !important;}
.w60{width:60% !important;}
.w70{width:70% !important;}
.w80{width:80% !important;}
.w90{width:90% !important;}
.w100{width:100% !important;}

.h50{height:50% !important;}

.w50s{width: 50px !important;}
.w110s{width:110px !important;}
.w120s{width:120px !important;}
.w130s{width:130px !important;}
.w140s{width:140px !important;}
.w150s{width:150px !important;}
.hover-underline a:hover{text-decoration:underline;}
.float-left{float:left}
.float-right{float:right;}
.abs{position: absolute;}
.rel{position: relative;}
.fix{position: fixed;}
.overflow{overflow:hidden !important}
.overflowx{overflow-x:auto}
.overflowy{overflow-y:auto}
.get-attendance{position: relative;}
.get-attendance span{cursor: pointer;}
.visible-hide{visibility: hidden;}
img{border: 0}
html,body{font : 0.9em/21px Tahoma,Verdana,Geneva,serif;height: 100%;width: 100%;color: #222222;}   

body{background: #fff;}

#top{background: #f9f9f9;height: 105px;border-bottom:1px solid #C3C3C3;position: fixed;top:0;width: 100%;z-index: 100;}
#middle{position: relative;margin: 105px 0 0 0;padding-bottom: 100px}
#bottom{background: none repeat scroll 0 0 #FFFFFF;border-top: 1px solid #CCCCCC;bottom: 0;height: 70px;position: fixed;width: 100%;}

#about-us{margin: 5px;float: left;}
#about-us span{font-size: 0.85em;}

#choose-language{width: 200px;float: right;text-align: right;margin: 15px 15px 0 0;}
#choose-language select{height: 30px;width: 120px;padding: 5px;background: #f5f5f5;border: 1px solid #ccc;}

.wrap-popup-confirm{display: none;width: 100%;height: 100%;top: 0;left:0;position: fixed;z-index: 150;background: url('../resources/images/bgconfirm.png');}
.popup-confirm{width: 350px;height: 150px;background: #f5f5f5;border:5px solid #ccc;position: absolute;z-index: 200;cursor: move;}
.popup-confirm-header{background: #ddd;height: 30px;line-height: 30px;padding:0 10px;font-weight: bold;border-bottom: 1px solid #ccc;}
.popup-confirm-header img{float: right;padding: 5px 0;}
.popup-confirm-content{padding: 10px;text-align: center;}
.popup-confirm-content span{}
.popup-confirm-content-navigation{position: absolute;bottom: 10px;left: 0;width: 100%;text-align: center;}

.icon{width:20px;height:20px;}
.message{z-index: 200;display: none;border: 1px solid #F0C36D;background:#F9EDBE;position: absolute;padding: 5px 10px;bottom: 0;border-radius:2px;font-weight: bold;}
.message a{text-decoration: none;margin:  0 0 0 5px;cursor: pointer;}

#logo{padding: 3px 0 3px 15px;float:left;width:200px;}
.menu-top{border-top: 1px solid #C3C3C3;background:url('../resources/images/bgtop.png');color:#FFFFFF;}
.menu-top ul{list-style: none;width:990px;margin:auto;}
.menu-top ul li{float:left;padding: 0 20px;height: 40px;}
.menu-top ul li a{display: block;font-size:0.9em;padding: 10px 0 0 0;color:#fff;text-decoration: none}
.menu-top ul li a img{margin: 0 7px 0 0;}
.menu-top ul li:hover{background: url("../resources/images/icon/selected.png") no-repeat center 34px !important;}
.menu-top-selected{background: url("../resources/images/icon/selected.png") no-repeat center 34px;}

.menu-left{padding: 15px 0 100px 0;background: #FFF;}
.menu-left ul{list-style: none;margin: auto;width: 190px}
.menu-left ul li{border-left: 5px solid #FFFFFF;}
.menu-left ul li a{padding:0px 15px;line-height: 35px;display: block;text-decoration: none;color: #333;cursor: pointer;}
.menu-left-selected{border-left: 5px solid #FF8400 !important;font-weight: bold;}
.menu-left-selected a{color:#FF8400 !important}
.menu-left ul li a:hover{background: #eee;}

.menu-sub-left {list-style: none;display: none;}
.menu-sub-left li{border-left: 5px solid #FFFFFF;background: url('../resources/images/icon/sub.png') no-repeat 18px 12px !important;}
.menu-sub-left li a{display: block;padding:0px 0 0 40px !important;text-decoration: none}
.menu-sub-left li a:hover{background: url('../resources/images/icon/sub.png') no-repeat 18px 12px #eee !important;}


#lcontent{width: 220px;overflow-y:auto;position: fixed;top: 110px;height: 70%}
.logged-in a{float: right; border:1px solid #ccc;background: #eee;margin: 14px;min-width: 250px;text-decoration: none;padding:4px 5px;}
.logged-in a img{float:right;background: #eee;width: 15px;height: 15px;padding: 5px}
.logged-in a span{padding: 5px;line-height: 25px;}
.logged-in-user{font-weight: bold;text-align: center;width: 100%;}
.logged-in:hover .logged-in-panel-div{display: block;}

.logged-in-panel-div{position: absolute;top: 90px;right: 14px;display: none;z-index:100;}
.logged-in-panel a{padding:4px 5px;;text-decoration: none;clear:both ;border:0px;background: #fff;margin: 0;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.logged-in-panel a img{background: #fff}
.logged-in-panel a:hover{background: #F9EDBE;color: #333;border-left:1px solid #F0C36D;border-bottom:1px solid #F0C36D;border-right:1px solid #F0C36D}
.logged-in-panel a:hover img{background: #F9EDBE;}

.loading{text-align: left;height: 10px;visibility: hidden;position: absolute;top:-25px;left:0;z-index: 200}
.loading img{padding: 5px 5px 5px 0}

#rcontent{float: right;background: #FFF;position: relative;}
.rcontent-main{padding: 10px 0 0 0;}

.paging-control{float:right;width: 130px;padding: 15px 0 ;}
.paging-control-button a {opacity:0.6}
.paging-control-button a:hover{opacity:1}
.paging-control-button select{padding:0;background: #f5f5f5;border: 1px solid #ccc;}

.main-content-table-paging{padding: 10px 0;text-align: right;width: 100%;}
.main-content-table-paging img{vertical-align: middle;margin: 0 5px;}
.main-content-table-paging select{height: 30px; width: 60px;;padding: 5px;background: #eee;border: 1px solid #ccc;}
.main-content-table{width: 100%;border-collapse: collapse;text-align: center;}
.main-content-table tr th{padding: 5px ;border-bottom: 1px solid #ccc;font-size: 12px;}
.main-content-table tr td{padding: 10px 5px;border-bottom: 1px solid #eee;font-size: 0.85em;}
.main-content-table tr:hover td{background: #eee;}
.main-content-table tr td a.view{display: block}
.table-row-selected{background: #FFFFCC;}

.control{border-bottom: 1px solid #ccc}

.control-button a{cursor:default;display: block;text-decoration: none;background: #333;float: left;margin: 10px 10px 10px 0;text-align: center;}
.control-button a img{width: 15px;height: 15px;padding: 7px;vertical-align: middle;float: left;}
.control-button a span{color: #fff;padding:0 10px 0 0;font-size: 0.85em;line-height: 28px;}
.control-button a:hover{background: #FF8400;}

.button{padding: 7px 20px;background: #333;color: #fff;border: none;font-size: 0.9em}
.button:hover{background: #FF8400 }

.navigation-button-noicon {text-decoration:none;text-align:center;min-width: 80px;padding:5px 20px;background: #555;color:#fff;border:1px solid #333;margin: 5px;font-size:0.85em;cursor: pointer;}    
.navigation-button-noicon:hover{background: #005DA0;border:1px solid #134372}


.info-header{float: left;font-size: 1.8em;color:#333;text-align: center;}
.info-table tr td{padding: 5px 10px;border-bottom:1px solid #eee}
.info-table-first{font-weight: bold;width: 180px}

.input-lpanel{width:30%;float:left;}
.input-rpanel{width:70%;float:left;}

.click{color:#333 !important;display: block;border: none !important;}
.required{color:red;}
.input-table-caption{display: block;font-size:1.2em ;padding:10px 0;color: #0178c8}
.input-table-caption select{padding: 2px;border: 1px solid #005DA0}
.input-table tr td{padding: 5px 10px;border-bottom:1px solid #eee}
.input-table-first{width: 180px}
.input-photo{border: 1px solid #CCCCCC;border-radius: 2px 2px 2px 2px;box-shadow: 0 0 3px 3px #EEEEEE;height: 200px;margin: 10px auto 0;width: 200px;overflow: hidden;}
.input-photo img{height: 200px;width: 200px;cursor: pointer;}
.upload-photo-staff{background: #333;color: #fff;cursor: pointer;border-radius:1px;font-size: 0.85em}
.wrapper-photo{width:201px;margin:auto;}

.input{background: #fff;padding: 5px  10px;border: 1px  solid  #ddd;width: 95%;border-radius:3px}
.input:focus{border: 1px  solid  #F0C36D;box-shadow:none}

.textarea{max-width: 100%;width: 100%;font-size: 1em;font-family: Tahoma,Verdana,Geneva,serif}

.department-tree{width: 25%;float: left;height: 100%;margin-right: 5%;overflow-y: hidden;overflow-x:auto;}
.department-tree ul li{padding: 0 0 0 25px;}
.last{background-position: 0 -1766px;}
.department-tree ul li a{color: #333;text-decoration: none;}
.department-tree ul li a:hover{}
.ui-tree{width:auto !important;}
.ui-tree .ui-tree-nodes .ui-tree-item{width:auto !important;}

.input-panel{width: 100%;display: block}

.table-many-month{width: 25px}

.popup{min-width: 350px;,min-height: 100px;background: #f5f5f5;border:3px solid #ccc;position: absolute;z-index: 200;cursor: default;}
.popup-header{background: #ddd;height: 30px;line-height: 30px;padding:0 10px;font-weight: bold;border-bottom: 1px solid #ccc;}
.popup-header img{float: right;padding: 5px 0;cursor: pointer;}

.popup-content{padding: 10px;text-align: left;}
.popup-content span{}
.popup-content-navigation{position: absolute;bottom: 10px;left: 0;width: 100%;text-align: center;}
.popup-content ul{list-style: none}
.popup-content ul li{float:left;padding: 5px 10px;}

.working-type-select{margin:0 10px;line-height: 30px;}
.working-type-description{width: 99%;border: 1px solid #ccc;margin: auto;color: #005DA0}

.number-input{width: 50px;background: #fff;border: 1px solid #005DA0;margin: 0 3px}

.attendance-input{width:15px;background: transparent;border: none;cursor: pointer;}
.attendance-chosen{padding: 10px;background: #eee;border: 1px solid #ccc}
.attendance-chosen select{padding: 7px;float: left}

.choose-type-action tr td a{padding: 5px;border: none !important}
.choose-type-action tr td a:hover{background: #333;color: #fff !important}
.choose-type-action-selected{background: #333;color: #fff !important}

.get-attendance-detail{display: none;position: absolute;background: #fff;top:-50px;right:0px;width: 100px;z-index: 9999;border: 1px solid #ccc}
.arrow-down{width: 10px;height: 10px;background:url('../resources/images/arrowdown.png');position: absolute; bottom: -10px;right: 8px}

/*Customer tree*/
.ui-corner-all{border-radius: 0 !important;}
.ui-tree-node-label{font-size: 0.9em;}
.ui-widget-content{border: none !important;font-size: 0.9em !important}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{background: #E9E9E9 !important;color: #333 !important;text-shadow:none !important;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{	background: none !important;border: 1px solid #FFF !important;box-shadow : none !important;}
.ui-state-hover{box-shadow:none !important;}
.ui-tree .ui-tree-parent span, .ui-tree .ui-tree-item span{font-size: 1em; padding-right: 2px}

/*custom css jquery calendar*/
.ui-datepicker{border: 1px solid silver !important;padding: 5x;background: #FFFFFF;border: 1px solid #c3c3c3;display: none}
.ui-datepicker-title{background: #005DA0;color: #FFFFFF;text-align: right;height: 30px;line-height: 30px;font-weight: bold}
.ui-datepicker-prev{float:left;margin: 0 0 0 8px;text-indent: -99999px;}
.ui-datepicker-next{float:right;margin: 0 8px 0 0;text-indent: -99999px;}
.ui-datepicker-month{margin: 5px 5px 0 0}
.ui-datepicker-calendar{background: #FFFFFF;}
.ui-datepicker-calendar tr th,td{padding: 3px 10px}
.ui-datepicker-calendar tr th,td a{color:#424242 !important;text-decoration: none !important;font-weight: normal !important;border: 1px solid #FFFFFF !important;}

/*custom css jquery time picker*/
.ui-timepicker {z-index: 1000;background: #333;color: #FF8400 }
.ui-timepicker a{color: #fff;cursor: pointer;}
.ui-timepicker a:hover{text-decoration: underline !important}
#ui-timepicker-div{border: 1px solid #ccc}
.ui-widget-header{background: none;border: none;text-shadow:0px}
.ui-widget{font-family: Tahoma,Verdana,Geneva,serif !important;}
.ui-timepicker{background: none}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{background: none}

.backtop{width: 50px; height: 50px;position: fixed; bottom: 5px; right: 120px;text-indent: -99999px;cursor: pointer;background: url('../resources/images/icon/top.png') no-repeat 0 0;}